import React from "react";
import Loading from "@/components/Loading";
import LayoutLoading from "@/components/LayoutLoading";
import Vistor from "@/pages/statistics/vistor";

const Page404 = React.lazy(() => import("@/components/404"));
const Person = React.lazy(() => import("@/pages/Person"));
const Login1 = React.lazy(() => import("@/pages/Login/login1"));
const MainLayout = React.lazy(() => import("@/components/Layout/MainLayout"));
const RoleList = React.lazy(() => import("@/pages/Role"))
const Home = React.lazy(() => import("@/pages/home"));
const Post = React.lazy(() => import("@/pages/post"));

export function createLayoutRoutes() {
  return [
    {
      path: '/post',
      name: '首页',
      exact: true,
      component: (props: any) => (
        <React.Suspense fallback={<div/>}>
          <Post {...props} />
        </React.Suspense>
      )
    },
    {
      path: '/home',
      name: '首页',
      exact: true,
      component: (props: any) => (
        <React.Suspense fallback={<div/>}>
          <Home {...props} />
        </React.Suspense>
      )
    },
    {
      path: '/login1',
      name: '登录1',
      exact: true,
      component: (props: any) => (
        <React.Suspense fallback={<div/>}>
          <Login1 {...props} />
        </React.Suspense>
      )
    },
    {
      path: '/person',
      name: '个人介绍',
      exact: true,
      component: (props: any) => (
        <React.Suspense fallback={<div/>}>
          <Person {...props} />
        </React.Suspense>
      )
    },
    {
      path: '/',
      name: '首页',
      component: (props: any) => (
        <React.Suspense fallback={<div/>}>
          <MainLayout {...props} />
        </React.Suspense>
      )
    },
    {
      name: "404",
      path: `*`,
      component: () => (
        <React.Suspense fallback={<LayoutLoading/>}>
          <Page404/>
        </React.Suspense>
      ),
    }
  ]
}

const subRoutes = [
  {
    name: "角色管理",
    path: `/system/role`,
    component: (props: any) => (
      <React.Suspense fallback={<Loading/>}>
        <RoleList {...props} />
      </React.Suspense>
    ),
  },
  {
    name: "访客统计",
    path: `/statistics/visitor`,
    component: (props: any) => (
      <React.Suspense fallback={<Loading/>}>
        <Vistor {...props} />
      </React.Suspense>
    ),
  },
]

export default subRoutes
